<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="../css/login.css" rel="stylesheet" type="text/css" />
		<link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
		
		<script  src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script  src="../js/Validform_v4.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			
		   //验证码是否通过检查的标示位
		   var codeFlag = false;
			$(function(){
			    //点看不清楚按钮，切换验证码图片
			    $("#imgVcode").click(function(){
					$("#imgVcode").attr("src","image.action?dt="+new Date().getTime());
					return false;
				});
				$("#changeImage").click(function(){
					$("#imgVcode").attr("src","image.action?dt="+new Date().getTime());
					return false;
				});
				
				//邮箱唯一检查
				$('#txtEmail').blur(function(){
					codeFlag = false;
					var txtCode = $("#txtEmail").val();
					if(txtCode==""){
						$("#email\\.info").html("<img src='../images/wrong.gif'/>邮箱不能为空！");
					}else{
						$("#email\\.info").html("<img src='../images/window_loading.gif'/>正在检测...");
						$.ajax({
							url:"CheckEmail.action",
							async:false,//请求同步处理
							data:{"email":txtCode},
							success:function(data){//data获取的是action返回的json数据
								if(data == true){
								    codeFlag = true;
									$("#email\\.info").html("<img src='../images/right.gif'/>该邮箱地址可用！");
								}else{
									$("#email\\.info").html("<img src='../images/wrong.gif'/>该邮箱地址已占用！");
								}
							}
						});
					}
				});
				
				//非空检查
				$('#txtNickName').blur(function(){
					codeFlag = false;
					var txtCode = $("#txtNickName").val();
					if(txtCode==""){
						$("#name\\.info").html("<img src='../images/wrong.gif'/>昵称不能为空！");
					}else{
						codeFlag = true;
						$("#name\\.info").html("");
					}
				});
				$('#txtPassword').blur(function(){
					codeFlag = false;
					var txtCode = $("#txtPassword").val();
					if(txtCode==""){
						$("#password\\.info").html("<img src='../images/wrong.gif'/>不能为空！");
					}else if($('#txtRepeatPass').val()!=''){
						
						if(txtCode!=$('#txtRepeatPass').val()){
							$("#password1\\.info").html("<img src='../images/wrong.gif'/>两次密码不同！");
						}else if(txtCode==$('#txtRepeatPass').val()){
							
							$("#password1\\.info").html("");
						}
					}else{
						codeFlag = true;
						$("#password\\.info").html("");
					}
				});
				$('#txtRepeatPass').blur(function(){
					codeFlag = false;
					var txtCode = $("#txtRepeatPass").val();
					if(txtCode==""){
						$("#password1\\.info").html("<img src='../images/wrong.gif'/>不能为空！");
					}else if(txtCode!=$("#txtPassword").val()){
						$("#password1\\.info").html("<img src='../images/wrong.gif'/>两次密码不同！");
					}else{
						codeFlag = true;
						$("#password1\\.info").html("");
					}
				});
				
				
				
				
				//验证码检查
				$("#txtVerifyCode").blur(function(){
					codeFlag = false;
					var txtCode = $("#txtVerifyCode").val();
					if(txtCode==""){
						$("#number\\.info").html("<img src='../images/wrong.gif'/>验证码不能为空！");
					}else{
						$("#number\\.info").html("<img src='../images/window_loading.gif'/>正在检测...");
						$.ajax({
							url:"validCode.action",
							async:false,//请求同步处理
							data:{"code":txtCode},
							success:function(data){//data获取的是action返回的json数据
								if(data == true){
								    codeFlag = true;
									$("#number\\.info").html("<img src='../images/right.gif'/>验证码正确！");
								}else{
									$("#number\\.info").html("<img src='../images/wrong.gif'/>验证码错误！");
								}
							}
						});
					}
				});
				
			});
			
			
			//点注册按钮时检查各个表单项是否通过检查
			$(function(){
				$("#f").submit(function(){
				    $("#txtVerifyCode").blur();
					if(codeFlag == false){
						alert("表单输入有误，请检查！");
						return false;
					}
					return true;
				});
			});
			
		</script>
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="register" id="f">
				<h2>
					以下均为必填项
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.email" type="text" id="txtEmail"  class="text_input"/>
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
									<span id="email.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="user.nickname" type="text" id="txtNickName" class="text_input" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="name.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.password" type="password" id="txtPassword" 
								class="text_input" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="password.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass" 
								class="text_input"/>
							<div class="text_left" id="repeatPassValidMsg">
							<span id="password1.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="image.action" />
							<input name="number" type="text" id="txtVerifyCode"
								class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									<a href="#"  id="changeImage">看不清楚？换个图片</a>
								</p>
								<span id="number.info" style="color:red"></span>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">

					<input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	</body>
</html>

